<template>
  <div class="sprite-container">
    <pre v-highlightjs="text" class="code-pre">
      <code class="javascript"></code>
    </pre>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        text: ''
      }
    },
    mounted() {
      this.names()
    },
    methods: {
      names() {
        this.text = `
        const scene = new Scene('#coordinate', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
        const layer = scene.layer();
        const [width] = scene.resolution;
        const label = new Label(\`resolution: \${[...scene.resolution]} | viewport: \${[...scene.viewport]}\`);
        label.attr({
          anchor: [0.5, 0],
          pos: [width / 2, 10],
          font: '32px Arial',
          fillColor: '#aaa',
        });
        layer.append(label);
        function createBox(x, size) {
          const box = new Label(\`\${size}px\`);
          const bgcolor = \`rgb(\${size % 128 + 100}, \${size % 66}, \${size % 77})\`;
          box.attr({
            anchor: [0.5, 0],
            pos: [x, 100],
            size: [size, size],
            bgcolor,
            fillColor: '#eee',
            font: '24px Arial',
            textAlign: 'center',
          });
          return box;
        }
        for(let i = 1, x = 200; i <= 4; i++) {
          const box = createBox(x, i * 100);
          x += 100 * (i + 1);
          layer.append(box);
        }
        window.addEventListener('resize', () => {
          label.text = \`resolution: \${[...scene.resolution]} | viewport: \${[...scene.viewport]}\`;
        });`
      }
    },
  }
</script>

<style scoped>
  .sprite-container {

  }
</style>
